<!DOCTYPE html>
<html>
  <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API v3 Example: Distance Matrix</title>
    <script src="http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN"></script>
    </script>

    <style type="text/css">
      body {
        margin: 20px;
        font-family: courier, sans-serif;
        font-size: 12px;
      }
      #map {
        height: 240px;
        width: 320px;
        border: solid thin #333;
        margin-top: 20px;
      }
    </style>

    <script>

      var map;
      var geocoder;
      var bounds = new google.maps.LatLngBounds();
      var markersArray = [];
      
var origin1 = "人民广场";
var origin2 = "上海城隍庙";
var destinationA = "外滩";
var destinationB = "豫园";

      var destinationIcon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000";
      var originIcon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000";

      function initialize() {
        var opts = {
          center: new google.maps.LatLng(31.2345653,121.490923),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'), opts);
        geocoder = new google.maps.Geocoder();
      }
    
      function calculateDistances() {
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix(
          {
            origins: [origin1, origin2],
            destinations: [destinationA, destinationB],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
          }, callback);
      }

      function callback(response, status) {
        if (status != google.maps.DistanceMatrixStatus.OK) {
          alert('Error was: ' + status);
        } else {
          var origins = response.originAddresses;
          var destinations = response.destinationAddresses;
          var outputDiv = document.getElementById('outputDiv');
          outputDiv.innerHTML = '';
          deleteOverlays();

          for (var i = 0; i < origins.length; i++) {
            var results = response.rows[i].elements;
            addMarker(origins[i], false);
            for (var j = 0; j < results.length; j++) {
              addMarker(destinations[j], true);
              outputDiv.innerHTML += origins[i] + " 到 " + destinations[j]
                  + ": <b>" + results[j].distance.text + "</b>，开车需要 <b>"
                  + results[j].duration.text + "</b><br />";
            }
          }
        }
      }

      function addMarker(location, isDestination) {
        var icon;
        if (isDestination) {
          icon = destinationIcon;
        } else {
          icon = originIcon;
        }
        geocoder.geocode({'address': location}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            bounds.extend(results[0].geometry.location);
            map.fitBounds(bounds);
            var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location,
              icon: icon
            });
            markersArray.push(marker);
          } else {
            alert("Geocode was not successful for the following reason: "
              + status);
          }
        });
      }
      
      function deleteOverlays() {
        if (markersArray) {
          for (i in markersArray) {
            markersArray[i].setMap(null);
          }
          markersArray.length = 0;
        }
      }

    </script>
  </head>
  <body onload="initialize()">
    <div id="inputs">
      <pre class="prettyprint">
var origin1 = "人民广场";
var origin2 = "上海城隍庙";
var destinationA = "外滩";
var destinationB = "豫园";
</pre>
      <p><button type="button" onclick="calculateDistances();">计算距离</button></p>
    </div>
    <div id="outputDiv"></div>
    <div id="map"></div>
  </body>
</html>
